<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      layout:decorator="layout/layout">
<title layout:fragment="title">轮播图管理</title>
<body>
<div class="main-content" layout:fragment="content">
    <div class="breadcrumbs" id="breadcrumbs">
        <ul class="breadcrumb">
            <li>
                <i class="icon-home home-icon"></i>
                <a th:href="@{/}" href="/">首页</a>
            </li>
            <li class="active">轮播图管理</li>
        </ul>
    </div>
    <!-- .page-content -->
    <div class="page-content">
        <div class="page-header">
            <h1 th:text="'轮播图管理'"></h1>
        </div>
        <div class="">
            <div class="col-xs-12">
                <a href="javascript:;" class="btn btn-primary btn-sm" id="upload-btn">
                    上传<i class="icon-cloud-upload icon-on-right bigger-120"></i>
                </a>
            </div>
        </div>
        <br/>
        <br/>
        <div class="row">
            <div class="col-xs-12">
                <ul class="ace-thumbnails" th:each="pic : ${pics}">
                    <li class="col-xs-3 " th:classappend="${pic.visible ? 'ID' + pic.id + ' sort-v' : 'ID' + pic.id}" style="margin: 0; border: thin solid #ccc; padding:0px; margin-top:5px">
                    <input type="hidden" th:value="${pic.id}">
                    <a href="#" data-rel="colorbox" class="cboxElement" style="display: block">
                        <img th:alt="${pic.target}" th:src="${pic.url}" width="100%" height="200px">
                        <div class="tags" style="margin-bottom: 35px;">
                            <div class="tags" style="margin-bottom: 175px;margin-left: auto">
                                <span class="label-holder">
                                    <span class="label label-info" th:text="${pic.activeName}"></span>
                                </span>
                            </div>
                            <span class="label-holder">
                                    <span class="label label-info" th:text="${pic.target}"></span>
                                </span>
                        </div>
                    </a>
                    <label class="pull-left inline" style="margin: 3px">
                        <input th:checked="${pic.visible}" type="checkbox" class="ace ace-switch ace-switch-7" onclick="Pics.changeVisible(this)">
                        <span class="lbl" style=""></span>
                    </label>
                    <div th:if="${!pic.visible}">
                        <label class="pull-right inline delete" style="margin: 3px">
                            <button class="btn btn-xs btn-danger" onclick="Pics.delete(this)">删除</button>
                        </label>
                        <label class="pull-right inline edit" style="margin: 3px">
                            <button class="btn btn-xs btn-purple" onclick="Pics.update(this)">编辑</button>
                        </label>
                    </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div id="upload_pic_modal" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">新建</div>
                <div class="modal-body" style="padding-top:1em; padding-left: 1em; padding-right: 1em">
                    <form action="createPic" method="post" enctype="multipart/form-data" id="upload_pic_form">
                        <input name="pic" type="file" id="id-input-file-3">
                        <!--<div class="form-group">
                            <label class="col-sm-2 control-label no-padding-right">活动名称：</label>
                            <div class="col-sm-10">
                                <input type="text" name="activiName" placeholder="请填写活动名称" class="col-xs-12 col-sm-12">
                            </div>
                        </div>-->
                        <div class="form-group">
                            <label class="col-sm-2 control-label no-padding-right">点击跳转：</label>
                            <div class="col-sm-10">
                                <input type="text" name="target" placeholder="图片点击后跳转地址" class="col-xs-12 col-sm-12">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer" style="margin-top: 10px;">
                    <button class="btn btn-success btn-sm" onclick="Pics.uploadAjx()">
                        <i class="icon-save"></i>
                        保存
                    </button>
                    <button class="btn btn-danger btn-sm" data-dismiss="modal">
                        <i class="icon-remove"></i>
                        取消
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div id="delete_pic_modal" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">确认删除？</div>
                <div class="modal-body ace-thumbnails" style="padding-top:1em; padding-left: 1em; padding-right: 1em">
                    <a data-rel="colorbox" class="cboxElement" style="display: block; margin-bottom: 1em">
                        <img alt="" src="" width="100%">
                    </a>
                    <span class="label-holder">
                        <span class="lbl">点击后跳转：</span><span class="label label-info"></span>
                    </span>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success btn-sm" onclick="Pics.deleteAjx()">
                        <i class="icon-save"></i>
                        删除
                    </button>
                    <button class="btn btn-danger btn-sm" data-dismiss="modal">
                        <i class="icon-remove"></i>
                        取消
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div id="update_pic_modal" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">修改</div>
                <div class="modal-body ace-thumbnails" style="padding-top:1em; padding-left: 1em; padding-right: 1em">
                    <a data-rel="colorbox" class="cboxElement" style="display: block; margin-bottom: 1em">
                        <img alt="" src="" width="100%">
                    </a>
                    <span class="label-holder">
                        <span class="lbl">点击跳转：</span><input type="text" id="target_update_input" placeholder="图片点击后跳转地址"
                                                             style="width: 80%">
                    </span>
                </div>
                <div class="modal-footer" style="margin-top: 1em">
                    <button class="btn btn-success btn-sm" onclick="Pics.updateAjx()">
                        <i class="icon-save"></i>
                        修改
                    </button>
                    <button class="btn btn-danger btn-sm" data-dismiss="modal">
                        <i class="icon-remove"></i>
                        取消
                    </button>
                </div>
            </div>
        </div>
    </div>

    <input type="hidden" id="visibleNum" th:value="${visibleNum}">
</div>
<script layout:fragment="script" th:src="@{/assets/js/banner/home.js}"></script>
</body>
</html>